<template>
  <!-- 亚马逊货件明细-->
  <a-table style="margin-top: 10px" class="table-normal-line" :data="list" size="mini" :summary="true" :bordered="false" :pagination="false">
    <template #columns>
      <a-table-column data-index="img" title="图片" :width="60">
        <template #cell="{ record }">
          <ImgPopover :src="record.productImg">
            <template #con>
              <a-image width="40" height="40" fit="contain" :src="record.productImg" />
            </template>
          </ImgPopover>
        </template>
      </a-table-column>
      <a-table-column title="MSKU/ASIN" :width="100">
        <template #cell="{ record }">
          <TextLimit :rows="1">{{ record.msku }}</TextLimit>
          <TextLimit :rows="1">{{ record.asin }}</TextLimit>
        </template>
      </a-table-column>
      <a-table-column data-index="fnsku" title="FNSKU" :width="100" />
      <a-table-column data-index="sku" title="SKU" :width="100" />
      <a-table-column data-index="quantityShipped" title="数量" :width="80" />
      <a-table-column data-index="quantityInCase" title="商品状况" :width="100" />
    </template>
    <template #summary-cell="{ column, record }">
      <p v-if="column.dataIndex == 'sku'">合计</p>
      <p v-else-if="['quantityShipped'].includes(column.dataIndex)">{{ record[column.dataIndex] }}</p>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { PropType } from 'vue'
  const props = defineProps({
    list: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
</script>
<style lang="less" scoped></style>
